<script setup lang="ts">
import { rootRouteList } from '@/config/routes'
import { useUserStore } from '@/stores'

const active = ref(0)
const route = useRoute()
const userStore = useUserStore()

// 显示条件：当前路由在根路由列表中
const show = computed(() => {
  if (route.name && rootRouteList.includes(route.name)) {
    return true
  }
  return false
})

// 根据用户角色获取导航项
const tabItems = computed(() => {
  const { role } = userStore.userInfo
  
  const baseItems = [
    {
      name: 'profile',
      route: '/profile',
      label: 'tabbar.profile',
      icon: 'i-carbon:user',
      roles: ['applicant', 'approver', 'warehouse_manager'] // 所有角色都能看到
    }
  ]
  
  const roleBasedItems = [
    {
      name: 'outbound',
      route: '/outbound',
      label: 'tabbar.outbound',
      icon: 'i-carbon:delivery',
      roles: ['applicant', 'approver', 'warehouse_manager'] // 所有角色都能看到
    },
    {
      name: 'inbound',
      route: '/inbound', 
      label: 'tabbar.inbound',
      icon: 'i-carbon:delivery-add',
      roles: ['approver', 'warehouse_manager'] // 审批人和仓库管理员可以看到
    }
  ]
  
  // 过滤出当前角色可以访问的项目
  const filteredItems = roleBasedItems.filter(item => 
    item.roles.includes(role || 'applicant')
  )
  
  // 返回排序后的导航项
  return [...filteredItems, ...baseItems]
})

// 是否显示开发调试工具
const isDev = import.meta.env.PROD

// 模拟角色切换功能（开发测试用）
const switchRole = (newRole: 'applicant' | 'approver' | 'warehouse_manager') => {
  userStore.userInfo.role = newRole
}
</script>

<template>
  <div v-if="show">
    <!-- 开发测试：角色切换按钮 -->
    <div v-if="isDev" class="role-switcher">
      <van-button 
        size="mini" 
        :type="userStore.userInfo.role === 'applicant' ? 'primary' : 'default'"
        @click="switchRole('applicant')"
      >
        申请人
      </van-button>
      <van-button 
        size="mini"
        :type="userStore.userInfo.role === 'approver' ? 'primary' : 'default'" 
        @click="switchRole('approver')"
      >
        审批人
      </van-button>
      <van-button 
        size="mini"
        :type="userStore.userInfo.role === 'warehouse_manager' ? 'primary' : 'default'"
        @click="switchRole('warehouse_manager')"
      >
        仓库管理员
      </van-button>
    </div>
    
    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" route placeholder fixed>
      <van-tabbar-item 
        v-for="item in tabItems" 
        :key="item.name"
        replace 
        :to="item.route"
        :badge="item.name === 'outbound' || item.name === 'inbound' ? 1 : undefined"
      >
        {{ $t(item.label) }}
        <template #icon>
          <div :class="item.icon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.role-switcher {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.role-switcher button {
  font-size: 10px !important;
  padding: 2px 6px !important;
  height: 24px !important;
}
</style>
